<template>
  <div>
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      nav-bar-text-color="@white"
      left-arrow
      @click-left="onClickLeft"
    />
    <header>
      <section>
        <!-- <p>代用名 188 **** 8888</p>
        <p>北京 北京市 昌平区 朱辛庄中公教育实训基地IT教学楼 2号楼 2202室</p> -->
        <div class="goodsAdress" @click="addAddress" v-if="address === null"> 
          +点击完善收货地址
        </div>
        <div class="address1" v-else>
          <p>姓名:{{ address.username }}</p>
          <p>手机号:{{ address.userphone }}</p>
          <p>收货地址:{{ address.location+" "+address.useraddress }}</p>
          <div @click="$router.push({path:'/address',query:{path:'/order'}})">Z</div>
        </div>
      </section>
    </header>

    <!-- 主要展示区 -->
    <div class="brand-order">
      <div class="first">
        <div class="l">
          <i class="iconfont icon-jiarugouwuche"></i>
          <span>品牌精选</span>
        </div>
        <div class="r">
          <span class="bdr-shu">已免运费</span>
          <span class="red-wz">领券</span>
        </div>
      </div>

      <div
        class="second"
        v-for="item in list"
        :key="item.id"
        style="border-bottom: 1px solid #eee; padding: 0.1rem 0rem"
      >
        <img :src="$pregImg + item.img" alt="" />
        <div class="r2">
          <p>{{ item.goodsname }}</p>
          <p>
            <span>&yen;{{ item.price }}</span>
            <span>x{{ item.num }}</span>
          </p>
          <div class="r2-b">
            <div class="bar1">7天无理由退货</div>
            <div class="bar2">特价</div>
          </div>
        </div>
      </div>

      <div class="third">
        <span class="type">发票类型</span>
        <div class="third-r">
          <span>不开发票</span>
          <i class="iconfont icon-icon"></i>
        </div>
      </div>

      <div class="fourth">
        <span>售后免邮</span>
        <span>部分商家赠送</span>
      </div>

      <div class="fourth">
        <span>买家留言</span>
        <span>填写内容需要与商家协商并确认，45字以内</span>
      </div>
    </div>

    <!-- 下面的详情 -->
    <div class="order-detail">
      <div class="row1">
        <span>商品金额</span>
        <span class="grey">&yen;{{ priceAll }}</span>
      </div>
      <div class="row1">
        <span>优惠活动</span>
        <span class="grey2">-&yen;200</span>
      </div>
      <div class="row1">
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>
    </div>

    <!-- 固定导航栏 -->
    <div class="nav-fix">
      <div class="inner">
        <div class="top">
          <a href="">
            <span class="sum">合计</span>
            <span class="gray">已免运费</span>
          </a>
          <a href="" class="a2">
            <span class="red-big">&yen;{{ priceAll }}</span>
            <span class="gray">已优惠&yen;200元</span>
          </a>

          <form action="">
            <input
              type="button"
              value="加入购物车"
              class="input1"
              style="visibility: hidden"
            />
            <input
              type="button"
              value="确认订单"
              class="input2"
              @click="orderConfirm"
            />
          </form>
        </div>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
import { addressList, orderAdd } from "../../request/api";
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
export default {
  data() {
    return {
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      order: "",
      showList: false,
      address: null,
      priceAll: "",
      sum: "",
      list: [],
      idstr:""
    };
  },
  methods: {
    onClickLeft() {
      this.$toast.success("返回到上一级");
      this.$router.back();
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange() {
      this.coupons.push(coupon);
    },
    addAddress() {
      this.$router.push("/address");
    },
    orderConfirm() {
      let params = {
        uid: JSON.parse(sessionStorage.getItem("user")).uid,
        countmoney: this.sum,
        countnumber: this.countnumber,
        idstr: this.idstr,
        address: this.event.id,
      };
      orderAdd(params).then((res) => {
        if (res.code === 200) {
          this.$toast.success("确认订单成功，进入支付界面");
          console.log(this.sum);
          this.$router.push({
            path: "/pay",
            query: {
              orderCode: res.list.outTradeNo.split(",")[0],
              countmoney:this.priceAll
            },
          });
        }
      });
    },
  },
  mounted() {
    // 路由参数会造成缓慢刷新，尽量不要使用
    // this.order = this.$route.query.data;
    if (this.event.id == undefined) {
      this.address = null;
    } else {
      addressList({ 
        uid: JSON.parse(sessionStorage.getItem("user")).uid,
        id: this.event.id,
        status: this.event.moren,
      }).then((res) => {
        console.log(res.list[0]);
        this.address = res.list[0];
      });
    }
    if (this.$route.query.data.list) {
      let arr = JSON.parse(JSON.stringify(this.$route.query.data));
      localStorage.setItem("copy", JSON.stringify(arr));
    }
    this.priceAll = localStorage.getItem("copy")
      ? JSON.parse(localStorage.getItem("copy")).countmoney
      : "";
    this.idstr = localStorage.getItem("copy")
      ? JSON.parse(localStorage.getItem("copy")).idstr
      : "";
    this.list = localStorage.getItem("copy")
      ? JSON.parse(localStorage.getItem("copy")).list
      : [];
    this.sum = localStorage.getItem("copy")
      ? JSON.parse(localStorage.getItem("copy")).countnumber
      : "";

       document.title=this.$route.meta.title
  },
};
</script>
<style scoped>
.goodsAdress {
  width: 1.8rem;
  height: 0.4rem;
  margin: 0 auto;
  border-radius: 0.05rem;
  line-height: 0.4rem;
  text-align: center;
  color: #e5a459;
  font-size: 0.16rem;
  font-weight: bold;
  border: 1px solid #dcbe89;
  background-color: #fef6eb;
}
/deep/ .van-cell::after {
  border: none;
}
/* 穿透 两种方式 :/deep/  >>> */
.van-coupon-cell >>> {
  padding: 0;
}
.van-cel >>> {
  padding: 0;
}
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  color: #fff;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 48px;
}

.address1 {
  position: relative;
  font-size: 0.14rem;
  margin: 0 auto;
  text-align: left;
  border-radius: 0.14rem;
}
.address1 div {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: red;
  top: 5px;
  right: 10px;
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
}
</style>